<template>
    <div class="page-all layui-layout layui-layout-admin">
        <div class="container-all mt-6">

            <div class="container-content">
                <div class="flex-stretch">
                    <div class="add-shadow">
                        <div class="layui-side-scroll">

                            <div class="layui-collapse" lay-accordion>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">连线</h2>
                                    <div class="layui-colla-content layui-show">
                                        <table width="100%">
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="line"
                                                        draggable="false"
                                                        @click="selectLine('link-line', 1)">
                                                        <img class="link-icon-style" id="link-line" :class="lineIndex==1?'lineType':''"
                                                            src="@/assets/images/jtopo/img/line.png"/>
                                                        <br><span>连线</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="foldline"
                                                        draggable="false"
                                                        @click="selectLine('link-foldline-h', 2)">
                                                        <img class="link-icon-style" id="link-foldline-h" :class="lineIndex==2?'lineType':''"
                                                            src="@/assets/images/jtopo/img/foldline_horizontal.png"/>
                                                        <br><span>折线(横向)</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="foldline"
                                                        draggable="false"
                                                        @click="selectLine('link-foldline-v', 3)">
                                                        <img class="link-icon-style" id="link-foldline-v" :class="lineIndex==3?'lineType':''"
                                                            src="@/assets/images/jtopo/img/foldline_vertical.png"/>
                                                        <br><span>折线(纵向)</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="flexline"
                                                        draggable="false"
                                                        @click="selectLine('link-flexline-h', 4)">
                                                        <img class="link-icon-style" id="link-flexline-h" :class="lineIndex==4?'lineType':''"
                                                            src="@/assets/images/jtopo/img/flexline_horizontal.png"/>
                                                        <br><span>二次折线(横向)</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="flexline"
                                                        draggable="false"
                                                        @click="selectLine('link-flexline-v', 5)">
                                                        <img class="link-icon-style" id="link-flexline-v" :class="lineIndex==5?'lineType':''"
                                                            src="@/assets/images/jtopo/img/flexline_vertical.png"/>
                                                        <br><span>二次折线(纵向)</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-link" topo-linktype="curveline"
                                                        draggable="false"
                                                        @click="selectLine('link-curveline', 6)">
                                                        <img class="link-icon-style" id="link-curveline" :class="lineIndex==6?'lineType':''"
                                                            src="@/assets/images/jtopo/img/curveline.png"/>
                                                        <br><span>曲线</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">虚拟网络设备</h2>
                                    <div class="layui-colla-content layui-show">
                                        <table width="100%">
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"
                                                        title="这是一个交换机">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_switcher.png"/>
                                                        <br><span>交换机</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"
                                                        title="这是一个路由器">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_router.png"/>
                                                        <br><span>路由器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VE" draggable="true"
                                                        title="使用一台VM主机安装多个网卡进行子网的互通,充当路由控制器">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_route_controller.png"/>
                                                        <br><span>VM路由控制器</span>
                                                    </div>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VE" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_firewall.png"/>
                                                        <br><span>防火墙</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VE" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_balancer.png"/>
                                                        <br><span>负载均衡</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">虚拟主机</h2>
                                    <div class="layui-colla-content layui-show">
                                        <table width="100%">
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_virtual_host.png"/>
                                                        <br><span>虚拟主机</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_client.png"/>
                                                        <br><span>客户机</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_server.png"/>
                                                        <br><span>服务器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_webserver.png"/>
                                                        <br><span>Web服务器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_mailserver.png"/>
                                                        <br><span>邮件服务器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="VM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_fileserver.png"/>
                                                        <br><span>文件服务器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">物理网络设备</h2>
                                    <div class="layui-colla-content layui-show">
                                        <table width="100%">
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_physical_host.png"/>
                                                        <br><span>物理主机</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_physical_switcher.png"/>
                                                        <br><span>物理交换机</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_firewall.png"/>
                                                        <br><span>物理防火墙</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="PM" draggable="true">
                                                        <img class="node-icon-style"
                                                            src="@/assets/images/jtopo/img/icon_physical_router.png"/>
                                                        <br><span>物理路由器</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">位置图形</h2>
                                    <div class="layui-colla-content layui-show">
                                        <table width="100%">
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="CL" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_cloud.png"/>
                                                        <br><span>云</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="100%" align="center">
                                                    <div topo-div-type="topo-node" topo-nodetype="HO" draggable="true">
                                                        <img class="node-icon-style" src="@/assets/images/jtopo/img/icon_house.png"/>
                                                        <br><span>房屋</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-canvas flex-item">
                        <!-- 顶部工具栏 -->
                        <div class="layui-nav">
                            <!-- <i class="fa fa-pencil-square-o toolbar-icon" aria-hidden="true" title="编辑"
                            onClick="editor.utils.editTopology()">编辑</i> -->
                            <i class="fa fa-arrows toolbar-icon" aria-hidden="true" title="全屏查看"
                            onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</i>
                            <i class="fa fa-align-center toolbar-icon" aria-hidden="true" title="居中显示"
                            onClick="editor.utils.showInCenter()">居中显示</i>
                            <!-- <i class="fa fa-eye toolbar-icon" aria-hidden="true" title="预览"
                            onClick="editor.utils.showPic()">预览</i> -->
                            <i class="fa fa-floppy-o toolbar-icon" aria-hidden="true" title="保存"
                            @click="saveTopology()">保存</i>
                            <i class="fa fa-clipboard toolbar-icon" aria-hidden="true" title="复制"
                            onClick="editor.utils.cloneSelectedNodes()">复制</i>
                            <i class="fa fa-times toolbar-icon" aria-hidden="true" title="删除"
                            onClick="editor.utils.deleteSelectedNodes()">删除</i>
                            <i class="fa fa-trash-o toolbar-icon" aria-hidden="true" title="清空"
                            onClick="editor.utils.clearTopology()">清空</i>
                            <i class="fa fa-search-plus toolbar-icon" aria-hidden="true" title="放大"
                            onClick="editor.utils.scalingBig()">放大</i>
                            <i class="fa fa-search-minus toolbar-icon" aria-hidden="true" title="缩小"
                            onClick="editor.utils.scalingSmall()">缩小</i>
                        </div>
                        <div id="topology-body" class="topology-context">
                            <!-- 节点右键菜单 -->
                            <div id="node-menu" class="right-click-menu" style="z-index: 9">
                                <div class="fa fa-wrench menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>节点设置</span>
                                </div>
                                <div class="fa fa-th-large menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>应用布局</span>
                                </div>
                                <div class="fa fa-th-list menu-item" id="change-node-text-pos"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>文字位置</span>
                                </div>
                                <div class="fa fa-search-plus menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>放大(Shift+)</span>
                                </div>
                                <div class="fa fa-search-minus menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>缩小(Shift-)</span>
                                </div>
                                <div class="fa fa-rotate-right menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>顺时针旋转(Shift+U)</span>
                                </div>
                                <div class="fa fa-rotate-left menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>逆时针旋转(Shift+I)</span>
                                </div>
                                <div class="fa fa-times menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>删除节点(Delete)</span>
                                </div>
                                <div class="fa fa-files-o menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>复制节点(Shift+C)</span>
                                </div>
                                <div class="fa fa-mail-reply menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>撤销(Shift+Z)</span></div>
                                <div class="fa fa-mail-forward menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>重做(Shift+R)</span></div>
                            </div>
                            <!-- 应用布局选项(二级菜单) -->
                            <div id="layout-menu" class="right-click-menu" style="z-index: 9">
                                <div class="fa fa-minus-circle menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>取消布局</span>
                                </div>
                                <div class="fa fa-object-group menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>分组布局</span>
                                </div>
                                <div class="fa fa-share-alt menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>树形布局</span>
                                </div>
                                <div class="fa fa-dot-circle-o menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>圆形布局</span>
                                </div>
                            </div>
                            <!-- 文字位置选项(二级菜单) -->
                            <div id="node-text-pos-menu" class="right-click-menu" style="z-index: 9">
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>顶部居左</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>顶部居中</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>顶部居右</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>中间居左</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>居中</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>中间居右</span></div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>底部居左</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>底部居中</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>底部居右</span>
                                </div>
                            </div>
                            <!-- 连线右键菜单 -->
                            <div id="line-menu" class="right-click-menu" style="z-index: 9">
                                <!--<div class="modeRightEdit" onMouseMove="this.style.backgroundColor='#c5e7f6'"-->
                                <!--onMouseOut="this.style.backgroundColor=''"><span class="menuSpan">添加描述</span></div>-->
                                <div class="fa fa-wrench menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>连线设置</span>
                                </div>
                                <div class="fa fa-times menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>删除连线</span></div>
                            </div>
                            <!-- 舞台右键菜单 -->
                            <div id="main-menu" class="right-click-menu" style="z-index: 9">
                                <div class="fa fa-search-plus menu-item"
                                    onClick="editor.utils.scalingBig()"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>放大(Shift+)</span>
                                </div>
                                <div class="fa fa-search-minus menu-item" onClick="editor.utils.scalingSmall()"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>缩小(Shift-)</span>
                                </div>
                                <div class="fa fa-trash-o menu-item" onClick="editor.utils.clear();"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>清空(Shift+Y)</span>
                                </div>
                                <div class="fa fa-eye menu-item" onClick="editor.utils.showPic();"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>预览(Shift+P)</span>
                                </div>
                                <div class="fa fa-arrows menu-item"
                                    onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>全屏查看(Shift+F)</span>
                                </div>
                                <div class="fa fa-align-center menu-item" onClick="editor.utils.showInCenter()"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>居中显示(Shift+G)</span>
                                </div>
                                <div class="fa fa-floppy-o menu-item" onClick="editor.saveToplogy(true)"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>保存(Shift+S)</span>
                                </div>
                                <div class="fa fa-question-circle menu-item" onclick="alert('帮助文档')"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span id="showHelp">查看帮助(Shift+H)</span>
                                </div>
                                <div class="fa fa-info-circle menu-item"
                                    onclick="window.open('json_view.html', '当前拓扑结构JSON展示', '').document.write(editor.stage.toJson())"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span id="showJSON">查看拓扑JSON结构</span></div>
                            </div>
                            <!-- 分组选项(二级菜单) -->
                            <div id="group-mange-menu" class="right-click-menu" style="z-index: 9">
                                <div class="fa fa-pencil-square-o menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>新建分组</span>
                                </div>
                                <div class="fa fa-align-left menu-item" id="align-group"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>对齐方式</span>
                                </div>
                            </div>
                            <div class="right-click-menu" id="group-align-menu" style="z-index: 9">
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>水平对齐</span>
                                </div>
                                <div class="menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>垂直对齐</span>
                                </div>
                            </div>
                            <div class="right-click-menu" id="container-mange-menu" style="z-index: 9">
                                <div class="fa fa-columns menu-item"
                                    onMouseMove="this.style.backgroundColor='#c5e7f6'"
                                    onMouseOut="this.style.backgroundColor=''">
                                    <span>拆分</span>
                                </div>
                            </div>

                            <!-- 鼠标悬浮显示节点信息 -->
                            <div class="node-infobox" style="display: none;">
                                <span>节点名称：<label name="node_name"></label></span>
                                <span>当前时间：<label name="current_time"></label></span>
                            </div>
                            <canvas class="topology-context" id="topology-canvas">
                                您的浏览器不支持HTML5!
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import {jsonData} from '@/utils/sdnjson.js'

export default {
    
    data(){
        return {
            dataJson: {},
            lineIndex: 1,
        }
    },
    mounted(){
        let _this = this;
        _this.dataJson = jsonData.data[0];
        _this.initSence();
    },
    methods: {

        // 保存页面舞台元素的状态,保存拓扑图
        saveTopology(){
            let _this = this;
            // @todo  保存编辑内容 
            layer.open({
                title: '保存提示',
                content: '自定义保存逻辑代码书写'
            }); 
        },

        // 点击连线触发添加选中样式方法
        selectLine(val, index){
            let _this = this;
            _this.lineIndex = index;
            switch(val.id){
                case 'link-line':
                    editor.lineType='line';
                    break;
                case 'link-foldline-h':
                    editor.lineType='foldLine';editor.config.direction='horizontal';
                    break;
                case 'link-foldline-v':
                    editor.lineType='foldLine';editor.config.direction='vertical';
                    break;
                case 'link-flexline-h':
                    editor.lineType='flexLine';editor.config.direction='horizontal';
                    break;
                case 'link-flexline-v':
                    editor.lineType='flexLine';editor.config.direction='vertical';
                    break;
                case 'link-curveline':
                    editor.lineType='curveLine';
                    break;
            }
        },

        // 初始化拖动事件
        dragEvent(){
            let _this = this;
            // 节点树中每个节点的拖放动作定义给拓扑图编辑器
            let nodes = $("[topo-div-type='topo-node']");
            let nodeLength = nodes.length;
            for (var i = 0; i < nodeLength; i++) {
                let text = $(nodes[i]).find("span").eq(0).text();
                editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
            }
        },

        // 生成舞台初始化
        initSence(){
            let _this = this;
            // 加载网络拓扑图
            // editor.loadTopology('', 'topology-canvas', "img/backimg.png");
            // if(!_this.dataJson.id){
            //     console.log('新增');
            //     _this.dataJson.content = ''
            //     _this.dataJson.id = ''
            //     if(editor.stage){
            //         editor.utils.clearStage();
            //         var tmp = $("#topology-canvas").clone();   //把当前面板存起来
            //         $("#topology-canvas").remove();    //移除
            //         $('#topology-body').append(tmp);    //将临时存的变量再放入页面  避免闪屏
            //     }
            // }else{
            //     console.log('编辑');
            // }
            // if(editor.stage && editor.stage.canvas.id == _this.dataJson.id){
            //     // 解决初始化闪屏bug
            //     var tmp = $("#topology-canvas").clone();   //把当前面板存起来
            //     $("#topology-canvas").remove();    //移除
            //     $('#topology-body').append(tmp);    //将临时存的变量再放入页面  避免闪屏
            // }
            let topologyJson = '';
            if(_this.dataJson.content==''){
                topologyJson = ''
            }else{
                topologyJson = _this.dataJson.content;
            }
            editor.init('', "/src/assets/images/jtopo/img/backimg.png", topologyJson, '#topology-body', {
                linkCallback: function(node1, node2){
                    // _this.sdnAddHoneypotCb(node1, node2);
                }
            })
            
            _this.dragEvent();

        },

    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}
.lineType{
    background: #ccc;
}
.add-shadow{
    height: 100vh;
    overflow-y: auto;
}
.flex-stretch{
    display: flex;
    align-items: stretch;
}
.flex-item{
    flex: 1;
}
.page-all{
    height: 100vh;
    .container-all{
        height: 100%;
    }
}
.content-canvas{
    position: relative;
    .layui-nav{
        position: absolute;
        top: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 9999;
        .toolbar-icon{
            font-size: 14px;
            margin-left: 20px;
            color: #eee;
        }
    }
}

.module {
    position: absolute;
    cursor: pointer;
    border: 1px dashed #0F0;
    visibility: hidden;
    z-index: 1;
}

.title {
    position: absolute;
    top: 100%;
    height: 0px;
    font-size: 12px;
    width: 100%;
    text-align: center;
    visibility: visible;
    z-index: 1;
}

.content {
    visibility: visible;
    z-index: 1;
    display: table-cell;
    vertical-align: middle;
}

.content img {
    vertical-align: middle;
}

/*缩放控制点*/
.top_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
}

.top_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: ne-resize;
    z-index: 1;
}

.middle_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: w-resize;
    z-index: 1;
}

.middle_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: w-resize;
    z-index: 1;
}

.bottom_left {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: sw-resize;
    z-index: 1;
}

.bottom_right {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
}

.scaling {
    font-size: 0px;
    width: 5px !important;
    height: 5px !important;
    width: 7px;
    height: 7px;
    border: 1px solid #000;
    background-color: #00F;
    position: absolute;
    z-index: 1;
    background-color: #0F0;
    cursor: nw-resize;
    z-index: 1;
}

.hidden {
    width: 400px;
    height: 400px;
    background-color: #030;
    z-index: 1;
}

.container {
    overflow: hidden;
    text-align: left;
}

.link-icon-style, .node-icon-style {
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.right-click-menu {
    position: absolute;
    width: 180px;
    display: none;
    background-color: #FFFFFF;
    border: 1px solid #b7c8f6;
}

.show {
    width: 200px;
    height: 100px;
    overflow: auto;
    border: 1px #99bbe8 solid;
    background-color: #ffffff;
    float: right;
    margin-top: 3px;
}

.message {
    position: absolute;
    top: 0px;
    left: 60px;
}

* {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}

.control {
    position: relative;
    width: 100%;
}

.topology-context {
    overflow: hidden;
    height: 98%;
    position: relative;
    background: url('../assets/images/jtopo/img/backimg.png');
}

/********** 顶部工具栏 **********/
.toolbar-icon {
    padding-top: 20px;
    margin-top: 5px;
    margin-left: 10px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.56);
    cursor: pointer;
}

/********** 右键菜单 **********/
.menu-item {
    padding-left: 5px;
    width: 100%;
    font-size: 18px;
    height: 24px;
    line-height: 24px;
    text-align: left;
    border-bottom: 1px dotted #cccccc;
}

.menu-item span {
    margin-left: 5px;
    font-size: 16px;
}

/********** 节点悬浮信息 **********/
.node-infobox {
    font-size: 12px;
    width: 130px;
    border: 1px solid #dddddd;
    text-align: left;
    position: absolute;
    background-color: #ffffff;
    padding: 6px;
    box-shadow: 2px 2px 2px #888888, -1px -1px 2px #888888, 1px -1px 2px #888888, 1px 2px 2px #888888;
    z-index: 999;
    opacity: 0.8;
}

.node-infobox span {
    display: block;
    margin-bottom: 4px;
}

.node-infobox span label {
    margin-right: 4px;
    font-size: 12px;
}
</style>
